import React, {useEffect, useState} from 'react';
import OptionSection from './OptionSection';
import styled from 'styled-components';

const StyledNotesWrapper = styled.div`
    width: 65vw;
    display: flex;
    line-height: 2em;
    font-size: 1.2em;
    padding: 0 10px;
    > input {
        flex-grow: 1;
        appearance: none;
        outline: none;
        border: 0;
        color: #999999;
        padding-left: 10px;
    }
    > .notesLength {
        width: 10vw;
        text-align: center;
        color: #BDBDBD;
        &.active {
            color: #FD9A16;
        }
    }
`

type Props = {
    notes: string,
    onNotesChange: Function
}

const Notes:React.FC<Props> = (props) => {

    const [notesLength, setNotesLength] = useState(0)

    useEffect(() => {
        setNotesLength(props.notes.length)
    }, [props.notes])

    return (
        <OptionSection iconName="notes" labelName="备注">
            <StyledNotesWrapper>
                <input type="text" value={props.notes} onChange={(event) => props.onNotesChange(event.target.value)} placeholder="没有备注怎么行" maxLength={12}/>
                <div className={"notesLength" + (notesLength > 0 ? ' active' : '')}>{notesLength}/12</div>
            </StyledNotesWrapper>
        </OptionSection>
    );
}

export default Notes